<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center space-x-8">
            <div class="flex items-center space-x-3">
              <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center shadow-lg">
                <span class="text-white font-bold text-lg">M</span>
              </div>
              <div>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">MAESS 系统管理后台</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400">Multi-Agent Enterprise Smart System</p>
              </div>
            </div>
            
            <!-- 导航菜单 -->
            <div class="hidden md:flex items-center space-x-1">
              <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                概览
              </button>
              <button class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-50 dark:text-purple-400 dark:bg-purple-900/30 rounded-lg">
                系统管理
              </button>
              <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                数据分析
              </button>
              <button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                帮助文档
              </button>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- 系统状态指示器 -->
            <div class="flex items-center space-x-2 px-3 py-1.5 bg-green-50 dark:bg-green-900/20 rounded-full">
              <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span class="text-sm font-medium text-green-700 dark:text-green-400">系统正常</span>
            </div>
            
            <!-- 操作按钮 -->
            <button
              @click="refreshData"
              class="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
              title="刷新数据"
            >
              <ArrowPathIcon class="w-5 h-5" />
            </button>
            
            <button
              @click="toggleDark()"
              class="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
            >
              <SunIcon v-if="isDark" class="w-5 h-5" />
              <MoonIcon v-else class="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">系统管理</h2>
        <p class="text-gray-600 dark:text-gray-400">管理系统配置、模型设置和数据备份</p>
      </div>
      
      <!-- 管理选项卡 -->
      <div class="mb-6">
        <div class="flex overflow-x-auto scrollbar-hide space-x-4">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            :class="[
              'px-5 py-2.5 rounded-lg whitespace-nowrap transition-all duration-300',
              activeTab === tab.id
                ? 'bg-purple-600 text-white shadow-md'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
            ]"
          >
            <span class="flex items-center">
              <component :is="tab.icon" class="w-4 h-4 mr-2" />
              {{ tab.name }}
            </span>
          </button>
        </div>
      </div>
      
      <!-- 选项卡内容 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
        <!-- 模型管理 -->
        <div v-if="activeTab === 'models'" class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">模型管理</h3>
            <div class="flex space-x-3">
              <button @click="refreshModels" class="px-4 py-2 bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 rounded-lg flex items-center text-sm font-medium">
                <RefreshCwIcon class="w-4 h-4 mr-2" />
                刷新列表
              </button>
              <button @click="showModelModal = true" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center text-sm font-medium transition-colors">
                <PlusIcon class="w-4 h-4 mr-2" />
                添加模型
              </button>
            </div>
          </div>
          
          <!-- 模型列表 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-900">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">模型名称</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">类型</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">状态</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">内存占用</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">加载时间</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr v-for="model in models" :key="model.id" class="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ model.name }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ model.version }}</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="{
                      'px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': model.type === 'local',
                      'px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200': model.type === 'cloud'
                    }">
                      {{ model.type === 'local' ? '本地模型' : '云端模型' }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="{
                      'px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': model.status === 'active',
                      'px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': model.status === 'loading',
                      'px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': model.status === 'error'
                    }">
                      {{ getStatusText(model.status) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900 dark:text-white">{{ formatMemory(model.memory_usage) }}</div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1">
                      <div class="bg-blue-600 h-1.5 rounded-full" :style="{ width: `${model.memory_percentage}%` }"></div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {{ model.load_time ? `${model.load_time}ms` : '-' }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                      <button @click="activateModel(model)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">激活</button>
                      <button @click="editModel(model)" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">编辑</button>
                      <button @click="deleteModel(model)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 模型配置 -->
          <div class="mt-8">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">模型切换配置</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">内存阈值设置</label>
                <div class="flex items-center">
                  <input 
                    v-model.number="memoryThreshold" 
                    type="range" 
                    min="70" 
                    max="95" 
                    step="1" 
                    class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer"
                  >
                  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">{{ memoryThreshold }}%</span>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">内存使用率超过此阈值时将触发模型切换</p>
              </div>
              
              <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">模型优先级策略</label>
                <select v-model="priorityStrategy" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                  <option value="performance">性能优先</option>
                  <option value="memory">内存优先</option>
                  <option value="balanced">平衡模式</option>
                </select>
              </div>
              
              <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">自动切换</label>
                <div class="flex items-center">
                  <input 
                    v-model="autoSwitchEnabled" 
                    type="checkbox" 
                    class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                  >
                  <span class="ml-2 block text-sm text-gray-700 dark:text-gray-300">启用自动模型切换</span>
                </div>
              </div>
            </div>
            
            <button @click="saveModelConfig" class="mt-6 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors">
              保存配置
            </button>
          </div>
        </div>
        
        <!-- 备份管理 -->
        <div v-if="activeTab === 'backups'" class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">备份管理</h3>
            <div class="flex space-x-3">
              <button @click="refreshBackups" class="px-4 py-2 bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 rounded-lg flex items-center text-sm font-medium">
                <RefreshCwIcon class="w-4 h-4 mr-2" />
                刷新列表
              </button>
              <button @click="createBackup" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center text-sm font-medium transition-colors">
                <PlusIcon class="w-4 h-4 mr-2" />
                立即备份
              </button>
            </div>
          </div>
          
          <!-- 备份列表 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-900">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">备份名称</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">类型</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">时间</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">大小</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">状态</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr v-for="backup in backups" :key="backup.id" class="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ backup.name }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ backup.description || '无描述' }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="{
                      'px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': backup.type === 'full',
                      'px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': backup.type === 'incremental'
                    }">
                      {{ backup.type === 'full' ? '完整备份' : '增量备份' }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {{ formatDate(backup.created_at) }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {{ formatSize(backup.size) }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="{
                      'px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': backup.status === 'completed',
                      'px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': backup.status === 'pending',
                      'px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': backup.status === 'failed'
                    }">
                      {{ getBackupStatusText(backup.status) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                      <button @click="downloadBackup(backup)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">下载</button>
                      <button @click="restoreBackup(backup)" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300">恢复</button>
                      <button @click="deleteBackup(backup)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 备份计划 -->
          <div class="mt-8">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">备份计划</h3>
            <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">备份频率</label>
                  <select v-model="backupFrequency" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                    <option value="daily">每日</option>
                    <option value="weekly">每周</option>
                    <option value="monthly">每月</option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">备份时间</label>
                  <input 
                    v-model="backupTime" 
                    type="time" 
                    class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
                  >
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">备份类型</label>
                  <select v-model="backupPlanType" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                    <option value="full">完整备份</option>
                    <option value="incremental">增量备份</option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">保留数量</label>
                  <input 
                    v-model.number="backupRetention" 
                    type="number" 
                    min="1" 
                    max="100" 
                    class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
                  >
                </div>
              </div>
              
              <div class="flex items-center mb-4">
                <input 
                  v-model="backupEnabled" 
                  type="checkbox" 
                  class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                >
                <span class="ml-2 block text-sm text-gray-700 dark:text-gray-300">启用自动备份</span>
              </div>
              
              <button @click="saveBackupPlan" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors">
                保存备份计划
              </button>
            </div>
          </div>
        </div>
        
        <!-- 系统设置 -->
        <div v-if="activeTab === 'settings'" class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">系统设置</h3>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 系统信息 -->
            <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
              <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">系统信息</h4>
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500 dark:text-gray-400">系统版本</span>
                  <span class="text-sm font-medium text-gray-900 dark:text-white">{{ systemInfo.version }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500 dark:text-gray-400">运行时间</span>
                  <span class="text-sm font-medium text-gray-900 dark:text-white">{{ systemInfo.uptime }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500 dark:text-gray-400">最后更新</span>
                  <span class="text-sm font-medium text-gray-900 dark:text-white">{{ formatDate(systemInfo.last_update) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 资源监控设置 -->
            <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
              <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">资源监控设置</h4>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">监控频率</label>
                  <select v-model="monitoringFrequency" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                    <option value="5s">5秒</option>
                    <option value="10s">10秒</option>
                    <option value="30s">30秒</option>
                    <option value="1m">1分钟</option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">历史数据保留</label>
                  <select v-model="dataRetention" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                    <option value="7d">7天</option>
                    <option value="14d">14天</option>
                    <option value="30d">30天</option>
                    <option value="90d">90天</option>
                  </select>
                </div>
              </div>
            </div>
            
            <!-- 日志设置 -->
            <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
              <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">日志设置</h4>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">日志级别</label>
                  <select v-model="logLevel" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                    <option value="debug">DEBUG</option>
                    <option value="info">INFO</option>
                    <option value="warning">WARNING</option>
                    <option value="error">ERROR</option>
                  </select>
                </div>
                
                <div class="flex items-center">
                  <input 
                    v-model="logRotationEnabled" 
                    type="checkbox" 
                    class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                  >
                  <span class="ml-2 block text-sm text-gray-700 dark:text-gray-300">启用日志轮转</span>
                </div>
              </div>
            </div>
            
            <!-- 安全设置 -->
            <div class="bg-gray-50 dark:bg-gray-900 p-5 rounded-lg">
              <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">安全设置</h4>
              <div class="space-y-4">
                <div class="flex items-center">
                  <input 
                    v-model="authRequired" 
                    type="checkbox" 
                    class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                    disabled
                  >
                  <span class="ml-2 block text-sm text-gray-700 dark:text-gray-300">需要身份验证</span>
                </div>
                
                <div class="flex items-center">
                  <input 
                    v-model="apiKeyRotation" 
                    type="checkbox" 
                    class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                  >
                  <span class="ml-2 block text-sm text-gray-700 dark:text-gray-300">启用API密钥自动轮换</span>
                </div>
              </div>
            </div>
          </div>
          
          <button @click="saveSystemSettings" class="mt-6 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors">
            保存系统设置
          </button>
        </div>
      </div>
    </main>
    
    <!-- 模型编辑模态框 -->
    <div v-if="showModelModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ editingModel ? '编辑模型' : '添加模型' }}</h3>
            <button @click="closeModelModal" class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
              <XMarkIcon class="w-5 h-5" />
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">模型名称</label>
              <input 
                v-model="modelForm.name" 
                type="text" 
                class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
                placeholder="输入模型名称"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">模型类型</label>
              <select v-model="modelForm.type" class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
                <option value="local">本地模型</option>
                <option value="cloud">云端模型</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">模型路径/URL</label>
              <input 
                v-model="modelForm.path" 
                type="text" 
                class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
                placeholder="模型路径或URL"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">内存限制 (MB)</label>
              <input 
                v-model.number="modelForm.memory_limit" 
                type="number" 
                class="block w-full rounded-md border border-gray-300 bg-white py-2 px-3 text-sm leading-4 text-gray-700 focus:border-purple-500 focus:outline-none focus:ring focus:ring-purple-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
                placeholder="0 表示不限制"
              >
            </div>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
          <button @click="closeModelModal" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium">
            取消
          </button>
          <button @click="saveModel" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import { SunIcon, MoonIcon, ArrowPathIcon, RefreshCwIcon, PlusIcon, XMarkIcon, SettingsIcon, DatabaseIcon, CpuIcon } from '@heroicons/vue/24/outline'
import { ElMessage } from 'element-plus'

// 深色模式
const isDark = useDark()
const toggleDark = useToggle(isDark)

// 选项卡
const activeTab = ref('models')
const tabs = [
  { id: 'models', name: '模型管理', icon: CpuIcon },
  { id: 'backups', name: '备份管理', icon: DatabaseIcon },
  { id: 'settings', name: '系统设置', icon: SettingsIcon }
]

// 模型管理数据
const models = ref([
  {
    id: 1,
    name: 'phi3:3.8b-instruct-q4_K_M',
    version: '1.0',
    type: 'local',
    status: 'active',
    memory_usage: 1250,
    memory_percentage: 45,
    load_time: 1230
  },
  {
    id: 2,
    name: 'qwen2:7b-instruct-q4_K_M',
    version: '1.0',
    type: 'local',
    status: 'inactive',
    memory_usage: 0,
    memory_percentage: 0,
    load_time: null
  },
  {
    id: 3,
    name: 'llama3',
    version: '1.0',
    type: 'local',
    status: 'inactive',
    memory_usage: 0,
    memory_percentage: 0,
    load_time: null
  },
  {
    id: 4,
    name: 'gpt-4',
    version: '1.0',
    type: 'cloud',
    status: 'active',
    memory_usage: 0,
    memory_percentage: 0,
    load_time: 500
  }
])

// 模型配置
const memoryThreshold = ref(85)
const priorityStrategy = ref('balanced')
const autoSwitchEnabled = ref(true)

// 备份管理数据
const backups = ref([
  {
    id: 1,
    name: 'backup_20240520_120000',
    description: '每日备份',
    type: 'full',
    created_at: '2024-05-20T12:00:00Z',
    size: 1024 * 1024 * 1024, // 1GB
    status: 'completed'
  },
  {
    id: 2,
    name: 'backup_20240519_120000',
    description: '每日备份',
    type: 'full',
    created_at: '2024-05-19T12:00:00Z',
    size: 1024 * 1024 * 1024,
    status: 'completed'
  },
  {
    id: 3,
    name: 'backup_20240518_120000',
    description: '每日备份',
    type: 'full',
    created_at: '2024-05-18T12:00:00Z',
    size: 1024 * 1024 * 1024,
    status: 'completed'
  }
])

// 备份计划
const backupFrequency = ref('daily')
const backupTime = ref('00:00')
const backupPlanType = ref('full')
const backupRetention = ref(7)
const backupEnabled = ref(true)

// 系统信息
const systemInfo = reactive({
  version: '1.0.0',
  uptime: '3 days, 12 hours, 45 minutes',
  last_update: '2024-05-20T08:30:00Z'
})

// 系统设置
const monitoringFrequency = ref('10s')
const dataRetention = ref('30d')
const logLevel = ref('info')
const logRotationEnabled = ref(true)
const authRequired = ref(true)
const apiKeyRotation = ref(false)

// 模型编辑模态框
const showModelModal = ref(false)
const editingModel = ref(null)
const modelForm = reactive({
  name: '',
  type: 'local',
  path: '',
  memory_limit: 0
})

// 方法
const refreshData = () => {
  ElMessage.success('数据已刷新')
}

const getStatusText = (status) => {
  const statusMap = {
    active: '活跃',
    inactive: '未激活',
    loading: '加载中',
    error: '错误'
  }
  return statusMap[status] || status
}

const formatMemory = (memory) => {
  if (memory >= 1024) {
    return `${(memory / 1024).toFixed(2)} GB`
  }
  return `${memory} MB`
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

const formatSize = (bytes) => {
  if (bytes >= 1024 * 1024 * 1024) {
    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
  } else if (bytes >= 1024 * 1024) {
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
  } else if (bytes >= 1024) {
    return `${(bytes / 1024).toFixed(2)} KB`
  }
  return `${bytes} B`
}

const getBackupStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    pending: '待处理',
    failed: '失败'
  }
  return statusMap[status] || status
}

// 模型管理方法
const refreshModels = () => {
  ElMessage.success('模型列表已刷新')
}

const activateModel = (model) => {
  models.value.forEach(m => {
    if (m.id !== model.id && m.type === 'local') {
      m.status = 'inactive'
      m.memory_usage = 0
      m.memory_percentage = 0
    }
  })
  model.status = 'active'
  ElMessage.success(`模型 ${model.name} 已激活`)
}

const editModel = (model) => {
  editingModel.value = model
  modelForm.name = model.name
  modelForm.type = model.type
  modelForm.path = model.path || ''
  modelForm.memory_limit = model.memory_limit || 0
  showModelModal.value = true
}

const deleteModel = (model) => {
  if (confirm(`确定要删除模型 ${model.name} 吗？`)) {
    models.value = models.value.filter(m => m.id !== model.id)
    ElMessage.success(`模型 ${model.name} 已删除`)
  }
}

const closeModelModal = () => {
  showModelModal.value = false
  editingModel.value = null
  resetModelForm()
}

const resetModelForm = () => {
  modelForm.name = ''
  modelForm.type = 'local'
  modelForm.path = ''
  modelForm.memory_limit = 0
}

const saveModel = () => {
  if (!modelForm.name.trim()) {
    ElMessage.error('请输入模型名称')
    return
  }
  
  if (editingModel.value) {
    // 编辑现有模型
    const model = models.value.find(m => m.id === editingModel.value.id)
    if (model) {
      model.name = modelForm.name
      model.type = modelForm.type
      model.path = modelForm.path
      model.memory_limit = modelForm.memory_limit
    }
    ElMessage.success('模型已更新')
  } else {
    // 添加新模型
    const newModel = {
      id: Date.now(),
      name: modelForm.name,
      version: '1.0',
      type: modelForm.type,
      status: 'inactive',
      memory_usage: 0,
      memory_percentage: 0,
      load_time: null,
      path: modelForm.path,
      memory_limit: modelForm.memory_limit
    }
    models.value.push(newModel)
    ElMessage.success('模型已添加')
  }
  
  closeModelModal()
}

const saveModelConfig = () => {
  ElMessage.success('模型配置已保存')
}

// 备份管理方法
const refreshBackups = () => {
  ElMessage.success('备份列表已刷新')
}

const createBackup = () => {
  ElMessage.success('备份已开始创建')
  // 模拟添加新备份
  const newBackup = {
    id: Date.now(),
    name: `backup_${new Date().toISOString().slice(0, 10).replace(/-/g, '')}_${Date.now()}`,
    description: '手动备份',
    type: 'full',
    created_at: new Date().toISOString(),
    size: 1024 * 1024 * 1024,
    status: 'pending'
  }
  backups.value.unshift(newBackup)
}

const downloadBackup = (backup) => {
  ElMessage.success(`正在下载备份 ${backup.name}`)
}

const restoreBackup = (backup) => {
  if (confirm(`确定要从备份 ${backup.name} 恢复系统吗？这将覆盖当前数据。`)) {
    ElMessage.success(`正在从备份 ${backup.name} 恢复系统`)
  }
}

const deleteBackup = (backup) => {
  if (confirm(`确定要删除备份 ${backup.name} 吗？`)) {
    backups.value = backups.value.filter(b => b.id !== backup.id)
    ElMessage.success(`备份 ${backup.name} 已删除`)
  }
}

const saveBackupPlan = () => {
  ElMessage.success('备份计划已保存')
}

// 系统设置方法
const saveSystemSettings = () => {
  ElMessage.success('系统设置已保存')
}

// 初始化
onMounted(() => {
  // 可以在这里加载实际数据
  console.log('系统管理后台已加载')
})
</script>

<style scoped>
/* 自定义滚动条样式 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>